<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<script type="text/javascript">
			function login() {
				window.location.href="/login.html"
			}
			function register() {
				window.location.href="/register.html"
			}
			function index() {
				window.location.href="/index.html"
			}
			function fan() {
				window.location.href="/findAllFan"
			}
			function search() {
				let vname = $("#mysearch").val();
				window.location.href = "/findAllVideo3/"+vname
			}
			function space(){
				let uid = $("span[name=1]").attr("id")
				window.location.href="/findUserById/"+ uid;
			}
			function space2(){
				let uid = $("span[name=1]").attr("id")
				window.location.href="/findUserById2/"+ uid;
			}
			function cancellation(){
				window.location.href="/cancellation"
			}
			function history(){
				let uid = $("span[name=1]").attr("id")
				window.location.href="/findAllHisByUid/"+uid
			}
			function bilibili(){
				window.location.href="https://www.bilibili.com/anime/timeline/"
			}
		</script>
		
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width,initial-scale=1,sharing-to-fit=no">
		
		<!--引入Bootstrap CSS-->
		<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
		
		<!-- 引入CSS Swiper插件 -->
		<link rel="stylesheet" th:href="@{/css/swiper.min.css}">
		
		<!--引入手风琴CSS-->
		<link rel="stylesheet" th:href="@{/css/style.css}">
		
		<!--引入 Dplayer css-->
		<link rel="stylesheet" th:href="@{/css/DPlayer.min.css}">
		
		<!--新加入-->
		<link rel="stylesheet" type="text/css" th:href="@{/css/demo.css}">
		
		<link th:href="@{/css/bootstrap-popover-x.css}" media="all" rel="stylesheet" type="text/css" />
		
		<style>
			.user{
				width:30px;
				height:30px;
				border-radius: 50%;
				border: #000000 1px solid;
			}
				
		</style>
			
	</head>
	<body>
		<!--导航栏开始-->
		<div class="col shadow-sm">
			<nav class="navbar p-1 navbar-expand-lg navbar-light bg-white" id="top">
			  <a class="navbar-brand" href="#">
				  <img th:src="@{/img/logo1.png}" class="img-fluid" style="max-width:80px;">
			  </a>
			  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			    <span class="navbar-toggler-icon"></span>
			  </button>

			  <div class="collapse navbar-collapse" id="navbarSupportedContent">
			    <ul class="navbar-nav mr-auto">
			      <li class="nav-item active">
			        <a class="nav-link" href="#" th:onclick="|javascript:index()|">主站<span class="sr-only">(current)</span></a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link" href="#" th:onclick="|javascript:fan()|">番剧</a>
			      </li>
			    </ul>

			    <form class="form-inline my-2 my-lg-0 ">
					<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" th:id="mysearch">
					<button class="btn btn-outline-dark my-2 my-sm-0" type="button" th:onclick="|javascript:search()|">搜索</button>
			    </form>

				<span th:id="${session.uid}" th:name="1"/>
				<span th:if="${session.username==null}">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item">
					  <a class="nav-link" href="#"></a>
					</li>
					<li class="nav-item">
					  <a class="nav-link" href="#" data-toggle="popover-x" data-target="#myPopover2a" data-placement="bottom">
						  <img th:src="@{/img/logo.png}" class="user"></a>
						  <!--未登陆前弹出框-->
						  <div id="myPopover2a" class="popover popover-x popover-info">
						  	<div class="arrow"></div>
						  	<h3 class="popover-header popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>
							<img th:src="@{/img/logo.png}" class="align-content-center" style="height: 70px;width: 70px;border-radius: 50%; border: #000000 1px solid;">
							您还没有登陆哦！</h3>
						  	<div class="popover-body popover-content">
								<div class="card border-0">
								  <img th:src="@{/img/logo.png}" class="card-img-top" alt="...">

								  <div class="card-body">
								    <a href="#" class="btn btn-info" style="width: 85px;" th:onclick="|javascript:login()|">登录</a>
								    <a href="#" class="btn btn-info ml-1" style="width: 85px;" th:onclick="|javascript:register()|">注册</a>

									<hr />
									<div class="btn-group dropleft">
									  <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									    🌏语言：简体中文
									  </button>
									  <div class="dropdown-menu">
									    <a class="dropdown-item active" href="#">简体中文</a>
									    <a class="dropdown-item" href="#">繁体中文</a>
									    <a class="dropdown-item" href="#">English</a>
									  </div>
									</div>

								  </div>
								</div>
						  	</div>
						  </div>
						  <!--未登陆前弹出框-->
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link" th:onclick="|javascript:login()|">登录</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link" th:onclick="|javascript:register()|">注册</a>
						</li>
					</ul>
				  </span>
				  <span th:unless="${session.username==null}">
				  <ul class="navbar-nav ml-auto">
					  <li class="nav-item">
						  <a class="nav-link" href="#"></a>
					  </li>
					  <li class="nav-item">
						  <a class="nav-link" href="#" data-toggle="popover-x" data-target="#myPopover3a" data-placement="bottom">
							  <img th:src="@{/img/logo.png}" class="user"></a>


						  <!--登陆后弹出框-->
							<div id="myPopover3a" class="popover popover-x popover-info">
								<div class="arrow"></div>
								<h3 class="popover-header popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>
								<img th:src="@{/img/logo.png}" class="align-content-center" style="height: 70px;width: 70px;border-radius: 50%; border: #000000 1px solid;">
								[[${session.nickname}]]</h3>
								<div class="popover-body popover-content">
									<div class="card border-0">
										<div class="card-body">
											<a href="#" class="btn btn-light" style="width: 65px;" th:onclick="|javascript:space()|">关注
											<br>[[${session.user.focus}]]</a>
											<a href="#" class="btn btn-light" style="width: 65px;">粉丝
											<br>[[${session.user.fans}]]</a>
											<a href="#" class="btn btn-light" style="width: 65px;">动态
											<br>--</a>
										</div>
										<hr />
										<ul class="list-group list-group-flush">
											<li class="list-group-item">
												<a href="#" class="btn btn-light" style="width: 200px;" th:onclick="|javascript:space()|">🧐个人中心</a>
											</li>
											<li class="list-group-item">
												<a href="#" class="btn btn-light" style="width: 200px;">📰投稿管理</a>
											</li>
											<li class="list-group-item">
												<div class="btn-group dropleft">
												  <button type="button" class="btn btn-light dropdown-toggle" style="width: 200px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
												    🌏语言：简体中文
												  </button>
												  <div class="dropdown-menu">
												    <a class="dropdown-item active" href="#">简体中文</a>
												    <a class="dropdown-item" href="#">繁体中文</a>
												    <a class="dropdown-item" href="#">English</a>
												  </div>
												</div>
											</li>
											<li class="list-group-item">
												<button type="button" class="btn btn-light" style="width: 200px;" th:onclick="|javascript:cancellation()|">❌退出</button>
											</li>
										</ul>

									</div>
								</div>
							</div>
						  <!--登陆后弹出框-->

					  </li>
					  <li class="nav-item">
								<a th:text="${session.nickname}" class="nav-link" href="#" th:onclick="|javascript:space()|"/>
							</li>
					  <li class="nav-item">
						  <a class="nav-link" href="#">消息</a>
					  </li>
					  <li class="nav-item">
						  <a class="nav-link" href="#">动态</a>
					  </li>
					  <li class="nav-item">
						  <a class="nav-link" href="#" th:onclick="|javascript:space2()|">收藏</a>
					  </li>
					  <li class="nav-item">
						  <a class="nav-link" href="#" th:onclick="|javascript:history()|">历史</a>
					  </li>
					  <li class="nav-item">
								<a class="nav-link" th:onclick="|javascript:cancellation()|">注销</a>
							</li>
				  </ul>
				  </span>
			  </div>
			</nav>
		</div>
		<!--导航栏结束-->
		
		<!--头部开始-->
		<iframe th:src="@{/navigation/header.html}"
				frameBorder="0" width="100%" scrolling="no" height="120px"></iframe>
		<!--头部结束-->
		
		<!--轮播图开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row">
					<div class="col-sm-12 col-md-6">
						<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
						  <ol class="carousel-indicators">
						    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
						    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
						    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
							<li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
							<li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
						  </ol>
						  <div class="carousel-inner">
						    <div class="carousel-item active">
						      <img th:src="@{/img/inlunbo01.png}" class="d-block w-100" alt="...">
						      <div class="carousel-caption d-none d-md-block">
<!--						        <h5>第一张轮播图</h5>-->
<!--						        <p>1广告位广告位广告位</p>-->
						      </div>
						    </div>
							
							<div class="carousel-item">
							  <img th:src="@{/img/inlunbo02.png}" class="d-block w-100" alt="...">
							  <div class="carousel-caption d-none d-md-block">
<!--							    <h5>第二张轮播图</h5>-->
<!--							    <p>2广告位广告位广告位</p>-->
							  </div>
							</div>
							
							<div class="carousel-item">
							  <img th:src="@{/img/inlunbo03.png}" class="d-block w-100" alt="...">
							  <div class="carousel-caption d-none d-md-block">
<!--							    <h5>第三张轮播图</h5>+-->
<!--							    <p>3广告位广告位广告位</p>-->
							  </div>
							</div>
							
							<div class="carousel-item">
							  <img th:src="@{/img/inlunbo04.png}" class="d-block w-100" alt="...">
							  <div class="carousel-caption d-none d-md-block">
<!--							    <h5>第四张轮播图</h5>-->
<!--							    <p>4广告位广告位广告位</p>-->
							  </div>
							</div>
							
							<div class="carousel-item">
							  <img th:src="@{/img/inlunbo05.png}" class="d-block w-100" alt="...">
							  <div class="carousel-caption d-none d-md-block">
<!--							    <h5>第五张轮播图</h5>-->
<!--							    <p>5广告位广告位广告位</p>-->
							  </div>
							</div>
						    
						    
						  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
						    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
						    <span class="sr-only">Previous</span>
						  </a>
						  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
						    <span class="carousel-control-next-icon" aria-hidden="true"></span>
						    <span class="sr-only">Next</span>
						  </a>
						</div>
					</div>
					</div>
					<div class="col-sm-12 col-md-6 d-none d-md-block ml-auto">
						<div class="card-deck">
							<div class="ml-4 mb-2" style="height: 125px;width: 160px;">
								<img th:src="@{/img/I01.jpg}" style="height: 100px; width: 155px;">
								<p><smalll></smalll></p>
							</div>
							
							<div class="ml-4 mb-2" style="height: 125px;width: 160px;">
								<img th:src="@{/img/I02.jpg}" style="height: 100px; width: 155px;">
								<p><smalll></smalll></p>
							</div>
							
							<div class="ml-4 mb-2" style="height: 125px;width: 160px;">
								<img th:src="@{/img/I03.jpg}" style="height: 100px; width: 155px;">
								<p><smalll></smalll></p>
							</div>
							
							<div class="ml-4 mb-2" style="height: 125px;width: 160px;">
								<img th:src="@{/img/I04.jpg}" style="height: 100px; width: 155px;">
								<p><smalll></smalll></p>
							</div>
							
							<div class="ml-4 mb-2" style="height: 125px;width: 160px;">
								<img th:src="@{/img/I05.jpg}" style="height: 100px; width: 155px;">
								<p><smalll></smalll></p>
							</div>
							
							<div class="ml-4 mb-2" style="height: 125px;width: 160px;">
								<img th:src="@{/img/I06.jpg}" style="height: 100px; width: 155px;">
								<p><smalll></smalll></p>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</section>
		<!--轮播图结束-->

		<!--美食板块开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row">
					<div class="col-sm-12 col-md-8">
						<div class="card-header" style="background-color: white;">
							<h4 class="d-inline-block">美食</h4>
							<a class="btn btn-outline-dark ml-4 float-md-right d-inline-block" href="#" role="button">换一换</a>
							<a class="btn btn-outline-dark ml-4 float-md-right d-inline-block" th:href="@{/findAllVideo/11}" role="button">更多</a>
						</div>
						<div class="card-deck">
							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/vimg/4f40deb441ff482c93060b65d5eab30d.png}" style="height: 100px; width: 155px;">
								<p><a th:href="@{/findVideoByVname/4f40deb441ff482c93060b65d5eab30d/true}"><smalll>云南最“神秘”火锅...</smalll></a><br>
									<a th:href="@{/findUserById/2}"><small class="text-muted">up:机器人2</small></a></p>
							</div>

							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/vimg/4f40deb441ff482c93060b65d5eab30h.png}" style="height: 100px; width: 155px;">
								<p><a th:href="@{/findVideoByVname/4f40deb441ff482c93060b65d5eab30h/true}"><smalll>每个爱吃肉的人都过...</smalll></a><br>
									<a th:href="@{/findUserById/4}"><small class="text-muted">up:机器人4</small></a></p>
							</div>

							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/vimg/4f40deb441ff482c93060b65d5eab31k.png}" style="height: 100px; width: 155px;">
								<p><a th:href="@{/findVideoByVname/4f40deb441ff482c93060b65d5eab31k/true}"><smalll>让人一口就沦陷的沙...</smalll></a><br>
									<a th:href="@{/findUserById/1}"><small class="text-muted">up:机器人1</small></a></p>
							</div>

							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/vimg/4f40deb441ff482c93060b65d5eab31n.png}" style="height: 100px; width: 155px;">
								<p><a th:href="@{/findVideoByVname/4f40deb441ff482c93060b65d5eab31n/true}"><smalll>8种凡尔赛式泡面煮...</smalll></a><br>
									<a th:href="@{/findUserById/4}"><small class="text-muted">up:机器人4</small></a></p>
							</div>

							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/vimg/4f40deb441ff482c93060b65d5eab31p.png}" style="height: 100px; width: 155px;">
								<p><a th:href="@{/findVideoByVname/4f40deb441ff482c93060b65d5eab31p/true}"><smalll>花了1700多买了块...</smalll></a><br>
									<a th:href="@{/findUserById/3}"><small class="text-muted">up:机器人3</small></a></p>
							</div>

							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/vimg/4f40deb441ff482c93060b65d5eab31q.png}" style="height: 100px; width: 155px;">
								<p><a th:href="@{/findVideoByVname/4f40deb441ff482c93060b65d5eab31q/true}"><smalll>天冷了，用【泡菜豆...</smalll></a><br>
									<a th:href="@{/findUserById/3}"><small class="text-muted">up:机器人3</small></a></p>
							</div>
							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/vimg/4f40deb441ff482c93060b65d5eab31s.png}" style="height: 100px; width: 155px;">
								<p><a th:href="@{/findVideoByVname/4f40deb441ff482c93060b65d5eab31s/true}"><smalll>冬天的第一杯奶茶...</smalll></a><br>
									<a th:href="@{/findUserById/4}"><small class="text-muted">up:机器人4</small></a></p>
							</div>
							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/vimg/4f40deb441ff482c93060b65d5eab32c.png}" style="height: 100px; width: 155px;">
								<p><a th:href="@{/findVideoByVname/4f40deb441ff482c93060b65d5eab32c/true}"><smalll>一般一般猫片第三？...</smalll></a><br>
									<a th:href="@{/findUserById/1}"><small class="text-muted">up:机器人1</small></a></p>
							</div>
						</div>
					</div>
					<div class="col-sm-12 col-md-4">
						<div class="card-header" style="background-color: white;">
							<h4 class="d-inline-block">排行榜</h4>
							<a class="btn btn-outline-dark float-md-right d-inline-block" href="#" role="button">更多</a>
						</div>
						<div class="card border-0" >
							<ul class="list-group list-group-flush">
								<li class="list-group-item"><span class="badge badge-info mr-2">1</span>
									<small>Cras justo odio Dapibus ac facilisis in Dapibus ac facilisis in</small></li>
								<li class="list-group-item"><span class="badge badge-info mr-2">2</span>
									<small>Dapibus ac facilisis inDapibus ac facilisis in</small></li>
								<li class="list-group-item"><span class="badge badge-info mr-2">3</span>
									<small>Vestibulum Vestibulum at eros at eros</small></li>
								<li class="list-group-item"><span class="badge badge-secondary mr-2">4</span>
									<small>Vestibulum Vestibulum at eros at eros</small></li>
								<li class="list-group-item"><span class="badge badge-secondary mr-2">5</span>
									<small>Vestibulum Vestibulum at eros at eros</small></li>
								<li class="list-group-item"><span class="badge badge-secondary mr-2">6</span>
									<small>Vestibulum Vestibulum at eros at eros</small></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!--美食板块结束-->

		<!--动画板块开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row">
					<div class="col-sm-12 col-md-8">
						<div class="card-header" style="background-color: white;">
							<h4 class="d-inline-block">动画</h4>
							<a class="btn btn-outline-dark ml-4 float-md-right d-inline-block" href="#" role="button">换一换</a>
							<a class="btn btn-outline-dark ml-4 float-md-right d-inline-block" href="#" role="button">更多</a>
						</div>
						<div class="card-deck">
							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/img/I01.jpg}" style="height: 100px; width: 155px;">
								<p><smalll>轮播图+推荐结束</smalll><br>
								<small class="text-muted">该图为暂时替代图</small></p>
							</div>
							
							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/img/I02.jpg}" style="height: 100px; width: 155px;">
								<p><smalll>轮播图+推荐结束</smalll><br>
								<small class="text-muted">该图为暂时替代图</small></p>
							</div>

							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/img/I03.jpg}" style="height: 100px; width: 155px;">
								<p><smalll>轮播图+推荐结束</smalll><br>
								<small class="text-muted">该图为暂时替代图</small></p>
							</div>

							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/img/I04.jpg}" style="height: 100px; width: 155px;">
								<p><smalll>轮播图+推荐结束</smalll><br>
								<small class="text-muted">该图为暂时替代图</small></p>
							</div>

							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/img/I05.jpg}" style="height: 100px; width: 155px;">
								<p><smalll>轮播图+推荐结束</smalll><br>
								<small class="text-muted">该图为暂时替代图</small></p>
							</div>

							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/img/I06.jpg}" style="height: 100px; width: 155px;">
								<p><smalll>轮播图+推荐结束</smalll><br>
								<small class="text-muted">该图为暂时替代图</small></p>
							</div>
							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/img/I06.jpg}" style="height: 100px; width: 155px;">
								<p><smalll>轮播图+推荐结束</smalll><br>
									<small class="text-muted">该图为暂时替代图</small></p>
							</div>
							<div class="ml-4 my-2" style="height: 145px;width: 160px;">
								<img th:src="@{/img/I06.jpg}" style="height: 100px; width: 155px;">
								<p><smalll>轮播图+推荐结束</smalll><br>
									<small class="text-muted">该图为暂时替代图</small></p>
							</div>
						</div>
					</div>
					
					<div class="col-sm-12 col-md-4">
						<div class="card-header" style="background-color: white;">
							<h4 class="d-inline-block">排行榜</h4>
							<a class="btn btn-outline-dark ml-4 float-md-right d-inline-block" href="#" role="button">更多</a>
						</div>
						<div class="card border-0" >
						  <ul class="list-group list-group-flush">
						    <li class="list-group-item"><span class="badge badge-info mr-2">1</span>
							<small>Cras justo odio Dapibus ac facilisis in Dapibus ac facilisis in</small></li>
						    <li class="list-group-item"><span class="badge badge-info mr-2">2</span>
							<small>Dapibus ac facilisis inDapibus ac facilisis in</small></li>
						    <li class="list-group-item"><span class="badge badge-info mr-2">3</span>
							<small>Vestibulum Vestibulum at eros at eros</small></li>
							<li class="list-group-item"><span class="badge badge-secondary mr-2">4</span>
							<small>Vestibulum Vestibulum at eros at eros</small></li>
							<li class="list-group-item"><span class="badge badge-secondary mr-2">5</span>
							<small>Vestibulum Vestibulum at eros at eros</small></li>
							<li class="list-group-item"><span class="badge badge-secondary mr-2">6</span>
							<small>Vestibulum Vestibulum at eros at eros</small></li>
						  </ul>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!--动画板块结束-->
		
		<!--番剧板块开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row">
					<div class="col-sm-12 col-md-8">
						<div class="card-header" style="background-color: white;">
							<h4 class="d-inline-block">番剧动态</h4>
							<a class="btn btn-outline-dark ml-4 float-md-right d-inline-block" href="#" role="button">换一换</a>
							<a class="btn btn-outline-dark ml-4 float-md-right d-inline-block" th:href="@{/findAllFan}" role="button">更多</a>
						</div>
						<div class="card-deck">
							<div class="ml-4 my-1" style="height: 235px;width: 160px;">
								<img th:src="@{/s_img/A65E85570E314499871B3F172BABCE9A.png}" style="height: 200px; width: 150px;">
								<p><a th:href="@{/findFanByFname/A65E85570E314499871B3F172BABCE9A/true}"><smalll>鬼灭之刃</smalll></a></p>
							</div>

							<div class="ml-4 my-1" style="height: 235px;width: 160px;">
								<img th:src="@{/s_img/A65E85570E314499871B3F172BABCE9B.png}" style="height: 200px; width: 150px;">
								<p><a th:href="@{/findFanByFname/A65E85570E314499871B3F172BABCE9B/true}"><smalll>Re：从零开始的异...</smalll></a></p>
							</div>

							<div class="ml-4 my-1" style="height: 235px;width: 160px;">
								<img th:src="@{/s_img/A65E85570E314499871B3F172BABCE9C.png}" style="height: 200px; width: 150px;">
								<p><a th:href="@{/findFanByFname/A65E85570E314499871B3F172BABCE9C/true}"><smalll>Re：从零开始的异...</smalll></a></p>
							</div>

							<div class="ml-4 my-1" style="height: 235px;width: 160px;">
								<img th:src="@{/s_img/A65E85570E314499871B3F172BABCE9D.png}" style="height: 200px; width: 150px;">
								<p><a th:href="@{/findFanByFname/A65E85570E314499871B3F172BABCE9D/true}"><smalll>工作细胞</smalll></a></p>
							</div>

							<div class="ml-4 my-1" style="height: 235px;width: 160px;">
								<img th:src="@{/s_img/A65E85570E314499871B3F172BABCE9E.png}" style="height: 200px; width: 150px;">
								<p><a th:href="@{/findFanByFname/A65E85570E314499871B3F172BABCE9E/true}"><smalll>辉夜大小姐想让我告...</smalll></a></p>
							</div>

							<div class="ml-4 my-1" style="height: 235px;width: 160px;">
								<img th:src="@{/s_img/A65E85570E314499871B3F172BABCE9F.png}" style="height: 200px; width: 150px;">
								<p><a th:href="@{/findFanByFname/A65E85570E314499871B3F172BABCE9F/true}"><smalll>埃罗芒阿老师</smalll></a></p>
							</div>

							<div class="ml-4 my-1" style="height: 235px;width: 160px;">
								<img th:src="@{/s_img/A65E85570E314499871B3F172BABCE9G.png}" style="height: 200px; width: 150px;">
								<p><a th:href="@{/findFanByFname/A65E85570E314499871B3F172BABCE9G/true}"><smalll>小林家的龙女仆</smalll></a></p>
							</div>

							<div class="ml-4 my-1" style="height: 235px;width: 160px;">
								<img th:src="@{/s_img/A65E85570E314499871B3F172BABCE9H.png}" style="height: 200px; width: 150px;">
								<p><a th:href="@{/findFanByFname/A65E85570E314499871B3F172BABCE9H/true}"><smalll>欢迎来到实力至上主...</smalll></a></p>
							</div>
						</div>
					</div>
					<div class="col-sm-12 col-md-4">
						<div class="card-header" style="background-color: white;">
							<h4 class="d-inline-block">排行榜</h4>
							<a class="btn btn-outline-dark ml-4 float-md-right d-inline-block" href="#" role="button">更多</a>
						</div>
						<div class="card border-0" >
						  <ul class="list-group list-group-flush">
						    <li class="list-group-item"><span class="badge badge-info mr-2">1</span>
							<span class="d-inline-block text-truncate mr-1" style="width: 180px;">
							<small>Dapibus ac facilisis inDapibus ac facilisis in</small></span>
							<small class="text-muted">更新至第13话</small>
							</li>
							
						    <li class="list-group-item"><span class="badge badge-info mr-2">2</span>
							<span class="d-inline-block text-truncate mr-1" style="width: 180px;">
							<small>Dapibus ac facilisis inDapibus ac facilisis in</small></span>
							<small class="text-muted">更新至第13话</small>
							</li>
							
						    <li class="list-group-item"><span class="badge badge-info mr-2">3</span>
							<span class="d-inline-block text-truncate mr-1" style="width: 180px;">
							<small>Dapibus ac facilisis inDapibus ac facilisis in</small></span>
							<small class="text-muted">更新至第13话</small>
							</li>
							
							<li class="list-group-item"><span class="badge badge-secondary mr-2">4</span>
							<span class="d-inline-block text-truncate mr-1" style="width: 180px;">
							<small>Dapibus ac facilisis inDapibus ac facilisis in</small></span>
							<small class="text-muted">更新至第13话</small>
							</li>
							
							<li class="list-group-item"><span class="badge badge-secondary mr-2">5</span>
							<span class="d-inline-block text-truncate mr-1" style="width: 180px;">
							<small>Dapibus ac facilisis inDapibus ac facilisis in</small></span>
							<small class="text-muted">更新至第13话</small>
							</li>
							
							<li class="list-group-item"><span class="badge badge-secondary mr-2">6</span>
							<span class="d-inline-block text-truncate mr-1" style="width: 180px;">
							<small>Dapibus ac facilisis inDapibus ac facilisis in</small></span>
							<small class="text-muted">更新至第13话</small>
							</li>

							  <li class="list-group-item"><span class="badge badge-secondary mr-2">7</span>
								  <span class="d-inline-block text-truncate mr-1" style="width: 180px;">
							<small>Dapibus ac facilisis inDapibus ac facilisis in</small></span>
								  <small class="text-muted">更新至第13话</small>
							  </li>

							  <li class="list-group-item"><span class="badge badge-secondary mr-2">8</span>
								  <span class="d-inline-block text-truncate mr-1" style="width: 180px;">
							<small>Dapibus ac facilisis inDapibus ac facilisis in</small></span>
								  <small class="text-muted">更新至第13话</small>
							  </li>

							  <li class="list-group-item"><span class="badge badge-secondary mr-2">9</span>
								  <span class="d-inline-block text-truncate mr-1" style="width: 180px;">
							<small>Dapibus ac facilisis inDapibus ac facilisis in</small></span>
								  <small class="text-muted">更新至第13话</small>
							  </li>
						  </ul>
						</div>
					</div>
				</div>
			</div>
			
			<div class="container mt-3">
				<div class="row">
					<div class="col-sm-12 col-md-8">
						<ul class="nav nav-tabs">
							<li class="nav-item">
								<a class="nav-link disabled" aria-disabled="true"><h4 class="text-dark">番剧</h4></a>
							</li>
							<li class="nav-item">
								<a class="nav-link active" href="#">最新</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">周一</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">周二</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">周三</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">周四</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">周五</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">周六</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">周日</a>
							</li>
							<li class="nav-item">
								<a class=" btn btn-outline-dark float-md-right d-inline-block" href="#" role="button" th:onclick="|javascript:bilibili()|">新番时间表</a>
							</li>

						</ul>
						<!--第一行-->
						<div class="card-deck mt-2">
							<div class="card mb-3 border-0" style="width:270px;height: 95px;">
								<div class="row no-gutters">
									<div class="col-md-4">
										<img th:src="@{/img/107.png}" class="card-img" style="width: 90px;height: 90px;">
									</div>
									<div class="col-md-8">
										<div class="card-body">
											<p class="card-text"> 名侦探柯南</p>
											<p class="card-text"><small class="text-info">第1050话</small></p>
										</div>
									</div>
								</div>
							</div>

							<div class="card mb-3 border-0" style="width:270px;height: 95px;">
								<div class="row no-gutters">
									<div class="col-md-4">
										<img th:src="@{/img/107.png}" class="card-img" style="width: 90px;height: 90px;">
									</div>
									<div class="col-md-8">
										<div class="card-body">
											<p class="card-text"> 名侦探柯南</p>
											<p class="card-text"><small class="text-info">第1050话</small></p>
										</div>
									</div>
								</div>
							</div>

							<div class="card mb-3 border-0" style="width:270px;height: 95px;">
								<div class="row no-gutters">
									<div class="col-md-4">
										<img th:src="@{/img/107.png}" class="card-img" style="width: 90px;height: 90px;">
									</div>
									<div class="col-md-8">
										<div class="card-body">
											<p class="card-text"> 名侦探柯南</p>
											<p class="card-text"><small class="text-info">第1050话</small></p>
										</div>
									</div>
								</div>
							</div>

						</div>
						<!--第二行-->
						<div class="card-deck mt-2">
							<div class="card mb-3 border-0" style="width:270px;height: 95px;">
								<div class="row no-gutters">
									<div class="col-md-4">
										<img th:src="@{/img/107.png}" class="card-img" style="width: 90px;height: 90px;">
									</div>
									<div class="col-md-8">
										<div class="card-body">
											<p class="card-text"> 名侦探柯南</p>
											<p class="card-text"><small class="text-info">第1050话</small></p>
										</div>
									</div>
								</div>
							</div>

							<div class="card mb-3 border-0" style="width:270px;height: 95px;">
								<div class="row no-gutters">
									<div class="col-md-4">
										<img th:src="@{/img/107.png}" class="card-img" style="width: 90px;height: 90px;">
									</div>
									<div class="col-md-8">
										<div class="card-body">
											<p class="card-text"> 名侦探柯南</p>
											<p class="card-text"><small class="text-info">第1050话</small></p>
										</div>
									</div>
								</div>
							</div>

							<div class="card mb-3 border-0" style="width:270px;height: 95px;">
								<div class="row no-gutters">
									<div class="col-md-4">
										<img th:src="@{/img/107.png}" class="card-img" style="width: 90px;height: 90px;">
									</div>
									<div class="col-md-8">
										<div class="card-body">
											<p class="card-text"> 名侦探柯南</p>
											<p class="card-text"><small class="text-info">第1050话</small></p>
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>
					<div class="col-sm-12 col-md-4">
						<h4>特别推荐</h4>
						<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
						  <ol class="carousel-indicators">
						    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
						    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
						    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
							<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
							<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
						  </ol>
						  <div class="carousel-inner">
						    <div class="carousel-item active">
						      <img th:src="@{/img/sub400.png}" class="d-block w-100" alt="...">
						    </div>
						    <div class="carousel-item">
						      <img th:src="@{/img/sub400.png}" class="d-block w-100" alt="...">
						    </div>
						    <div class="carousel-item">
						      <img th:src="@{/img/sub400.png}" class="d-block w-100" alt="...">
						    </div>
							<div class="carousel-item">
							  <img th:src="@{/img/sub400.png}" class="d-block w-100" alt="...">
							</div>
							<div class="carousel-item">
							  <img th:src="@{/img/sub400.png}" class="d-block w-100" alt="...">
							</div>
						  </div>
						  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
						    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
						    <span class="sr-only">Previous</span>
						  </a>
						  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
						    <span class="carousel-control-next-icon" aria-hidden="true"></span>
						    <span class="sr-only">Next</span>
						  </a>
						</div>
						
					</div>
				</div>
			</div>
		</section>
		<!--番剧板块结束-->

		
		<div class="float-lg-right">
			<a href="#top" class="btn btn-light back-to-top">Back to top</a>
		</div>
		
		
		<!--页脚开始-->
		<footer class="mt-4 bg-dark text-light small">
			<div class="container">
				<div class="row pt-3 pb-5">
					<div class="col-sm-12 col-md-10">
						<div class="pt-3">
							<p class="mb-2">本网站只作为课程学习阶段性作业，并无商业用途。</p>
							
							<ul class="nav">
								<li class="nav-item"><a class="nav-link text-white pl-0" href="#">关于我们</a></li>
								<li class="nav-item"><a class="nav-link text-white pl-0" href="#">联系我们</a></li>
								<li class="nav-item"><a class="nav-link text-white pl-0" href="#">用户协议</a></li>
								<li class="nav-item"><a class="nav-link text-white pl-0" href="#">隐私政策</a></li>
								<li class="nav-item"><a class="nav-link text-white pl-0" href="#">加入我们</a></li>
							</ul>
							
							<div class="text-light">
								XXXX项目开发小组<span class="mx-3">版权所有</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</footer>
		<!--页脚结束-->

		<!--引入 JavaScript文件和jQuery-->
		<!--引入顺序：jQuery，然后Popper.js，然后Bootstrap.js-->
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/bootstrap.bundle.js}"></script>
		
		<!--引入popover.js-->
		<script th:src="@{/js/bootstrap-popover-x.js}" type="text/javascript"></script>
		
	</body>
</html>
